<template>
<div class="mine-shadow-item box-shadow_2">
    <div class="container"
        :style="'background-color:'+itemData.background_outside+';'">
        <div class="top"
            :style="itemData.shadow+'background-color:'+itemData.background+';'">
        </div>
        <div class="copy">
            <Copy
                title="CSS"
                :content="itemData.shadow">
            </Copy>
        </div>
        <div class="remove" @click.stop="onRemove">
            <Remove></Remove>
        </div>
        <div class="type">
            <i :class="itemData.id?'el-icon-star-on':''"></i>
        </div>
        <div class="link" v-if="itemData.id" @click="goInfo">
            <i class="el-icon-top-right"></i>
        </div>
    </div>
    <div class="colorList">
        <ColorList
            :colors_data="itemData.shadow + itemData.background +' '+ itemData.background_outside +' '">
        </ColorList>
    </div>
</div>
</template>
<script>
import Copy from '@/components/other/Copy';
import ColorList from '@/components/other/ColorList';
import Remove from '@/components/other/Remove';
export default {
    name: 'MineShadowItem',
    components: {Remove,Copy,ColorList},
    props:{
        itemData:{ //对象数据
            type:Object,
            default:()=>{
                return {};
            },
        },
    },
    data(){
        return{};
    },
    methods:{
        goInfo(){
            if(!this.itemData.id) return;
            this.$router.push("/shadow/"+this.itemData.id).catch(() => {return;});
        },
        onRemove(){
            if(this.itemData.id){  //表示这是like的
                this.$store.commit('deleteMyLike',{
                    shadow:this.itemData.id,
                });
            }else{
                this.$store.commit('deleteMyCreate',{
                    shadow:this.itemData,
                });
            }
        },
    },
}
</script>
<style lang="scss" scoped>
.mine-shadow-item{
    width: 210px;
    margin: 0px 10px 20px 10px;
    border: none;
    background-color: white;
    box-sizing: border-box;
    border-radius: 5px;
    padding: 10px;
    >.container{
        overflow: hidden;
        position: relative;
        border-radius: 3px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 160px;
        i{
            font-weight: bold;
        }
        >.top{
            width: calc(100% - 80px);
            position: relative;
            height: calc(100% - 60px);
            border-radius: 3px;
        }
        >.copy{
            width: fit-content;
            position: absolute;
            bottom: 5px;
            left: 5px;
            opacity: 0;
            transition: all 0.2s;
            /deep/.Copy{
                border-radius: 3px;
                font-size: 1.3rem;
            }
        }
        >.remove{
            position: absolute;
            top: 5px;
            right: 5px;
            opacity: 0;
            transition: all 0.2s;
        }
        &:hover{
            >.copy{
                opacity: 1;
            }
            >.remove{
                opacity: 1;
            }
        }
        >.type{
            position: absolute;
            top: 5px;
            left: 5px;
            color: #3a3a59;
            font-size: 1.3rem;
            line-height: 1.3rem;
            padding: 3px;
            width: 20px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        >.link{
            position: absolute;
            top: 5px;
            left: 28px;
            color: #3a3a59;
            font-size: 1.4rem;
            line-height: 1.4rem;
            padding: 3px;
            width: 20px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
    }
    
}
</style>

